<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="pragma" content="no-cache" />
    <script src="vue.global.prod.js"></script>
    <script src="axios.min.js"></script>
    <script src="noty.min.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" href="noty.css" />
    <link rel="stylesheet" href="mint.css" />
    <link rel="stylesheet" href="style.css" />
    <link rel="shortcut icon" href="favicon.ico" />
    <title>数据分析</title>
    <style>
        #body table th,
        #body table td {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <header class="page-head">
        <a class="title" href="/log">Format Name</a>
        <div class="compass">
            <a href="https://gitee.com/cxh1205/FormatName/blob/master/README.md#%E4%BD%BF%E7%94%A8%E6%89%8B%E5%86%8C"
                target="_blank">使用手册</a>
        </div>
    </header>
    <table id="body">
        <tr>
            <td>
                <div @click="back" class="button">返回</div>
            </td>
        </tr>
        <tr>
            <td>
                <table>
                    <tr>
                        <th>旧名字</th>
                        <th>新名字</th>
                    </tr>
                    <tr v-for="name in list">
                        <td class="raw">{{name['old']}}</td>
                        <td class="raw">{{name['new']}}</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <div class="tip">点击↓↓↓表格↓↓↓内容即可复制到剪贴板</div>
            </td>
        </tr>
        <tr>
            <td>
                <table>
                    <tr>
                        <th>没交</th>
                    </tr>
                    <tr v-for="i in none">
                        <td @click="mes=i;copy()" class="raw" style="cursor: pointer">
                            {{i}}
                        </td>
                    </tr>
                </table>
                <table>
                    <tr>
                        <th>多交</th>
                    </tr>
                    <tr v-for="i in remain">
                        <td @click="mes=i;copy()" class="raw" style="cursor: pointer">
                            {{i}}
                        </td>
                    </tr>
                </table>
                <table>
                    <tr>
                        <th>未知</th>
                    </tr>
                    <tr v-for="i in unknow">
                        <td @click="mes=i;copy()" class="raw" style="cursor: pointer">
                            {{i}}
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr>
            <td>
                <div @click="submit" class="button submit" v-if="flag==0">改名</div>
                <div @click="submit" class="button submit" style="background-color: rgb(255, 10, 31)" v-if="flag==1">
                    恢复
                </div>
                <div @click="backup" class="button submit" v-if="flag==0">
                    备份并改名
                </div>
                <div @click="back" class="button">返回</div>
            </td>
        </tr>
    </table>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    list: [],
                    unknow: [],
                    none: [],
                    remain: [],
                    mes: "",
                    flag: 0,
                };
            },
            methods: {
                range(start, stop, step = 1) {
                    return Array(Math.ceil((stop - start) / step))
                        .fill(start)
                        .map((x, y) => x + y * step);
                },
                test() {
                    axios.post("GetExecute").then((res) => {
                        var data = res.data;
                        this.list = res.data["list"];
                        map = res.data["map"];
                        new_list = res.data["new"];
                        old_list = res.data["old"];
                        this.flag = res.data["flag"];
                        for (i in this.range(0, map.length)) {
                            if (map[i] == 0) {
                                this.none.push(new_list[i]); //没交的
                            } else if (map[i] > 1) {
                                this.remain.push(new_list[i]); //多交的
                            }
                        }
                        for (i in this.list) {
                            old_list[old_list.indexOf(this.list[i]["old"])] = null; //原本名字里有的改成null
                        }
                        for (i in old_list) {
                            if (old_list[i]) {
                                this.unknow.push(old_list[i]);
                            }
                        }
                    }).catch((res) => {
                        notify("未知错误，请复制黑色窗口中最后一行的报错发给作者寻找原因", "error");
                    });
                },
                copy() {
                    //创建input标签
                    var input = document.createElement("input");
                    //将input的值设置为需要复制的内容
                    input.value = this.mes;
                    //添加input标签
                    document.body.appendChild(input);
                    //选中input标签
                    input.select();
                    //执行复制
                    document.execCommand("copy");
                    //成功提示信息
                    alert("复制成功");
                    //移除input标签
                    document.body.removeChild(input);
                },
                submit() {
                    if (this.flag == 0) {
                        axios.post("Rename").then((res) => {
                            if (res.data["code"] == 0) {
                                notify(res.data["msg"], "success");
                                this.flag = !this.flag;
                            } else {
                                notify(res.data["msg"], "error");
                            }
                        }).catch((res) => {
                            notify("未知错误，请复制黑色窗口中最后一行的报错发给作者寻找原因", "error");
                        });
                    } else {
                        axios.post("Recover").then((res) => {
                            if (res.data["code"] == 0) {
                                notify(res.data["msg"], "success");
                                this.flag = !this.flag;
                            } else {
                                notify(res.data["msg"], "error");
                            }
                        }).catch((res) => {
                            notify("未知错误，请复制黑色窗口中最后一行的报错发给作者寻找原因", "error");
                        });
                    }
                },
                backup() {
                    notify("开始备份，请耐心等待", "success");
                    axios.post("Backup").then((res) => {
                        if (res.data["code"] == 0) {
                            notify(res.data["msg"], "success");
                            notify("开始改名", "success");
                            this.submit();
                        } else {
                            notify(res.data["msg"], "error");
                        }
                    }).catch((res) => {
                        notify("未知错误，请复制黑色窗口中最后一行的报错发给作者寻找原因", "error");
                    });
                },
                back() {
                    document.location.href = "/";
                },
            },
            created() {
                this.test();
            },
        });
        const vm = app.mount("#body");
    </script>
</body>

</html>